/* ================================================================================ 
   =====                            CSS STYLES FOR                            ===== 
   =====                        SCHOOLWEBSITE.NU SKIN                         ===== 
   ================================================================================ */


 /* ================================================================================ 
                                  GENERAL SETTINGS
   ================================================================================ */  
   
@font-face { 
	font-family: "Ionicons"; 
	src: url("fonts/Ionicons/ionicons.eot"); 
	src: url("fonts/Ionicons/ionicons.eot#iefix") format("embedded-opentype"), 
		 url("fonts/Ionicons/ionicons.ttf") format("truetype"), 
		 url("fonts/Ionicons/ionicons.woff") format("woff"), 
		 url("fonts/Ionicons/ionicons.svg#Ionicons") format("svg");
	font-weight:normal;
	font-style:normal; 
}
 
@import url("custom_parts.css");


html {
    margin:0px; 
    padding:0px; 
    overflow-y:scroll;         /* Altijd een scrollbalk afdwingen i.v.m. verspringingen */
}
.noScroll {  position:fixed; width:100%; }

body {
	text-align:left;
	font-family:Arial, Sans-Serif;
	font-size:14px;
	line-height:1.5;
}

#Body { }    /* Achtergrondkleuren + afbeeldingen hier */

#Form { }      /* om hoogte op minimaal 100% te zetten, mag wel groter */


/* HEADINGS */
H1, H2, H3, H4, H5 {font-family: 'Lily Script One', cursive; letter-spacing:normal !important }
H1 {font-size:60px; font-weight:400; padding:20px 0}
H2 {font-size:34px; font-weight:400; padding:20px 0}
H3 {font-size:22px; font-family: 'Exo', sans-serif; font-weight:700}
H4 {font-size:18px; font-family: 'Exo', sans-serif; font-weight:700}
H5 {font-size:16px;  font-family: 'Exo', sans-serif; font-weight:700; color:#000;}

/* LINKS */ 
A:link      {text-decoration:none; transition:color 0.3s ease;  -webkit-transition:color 0.3s ease;}
A:visited   {}
A:hover     { text-decoration:underline;}
A:active    {}

/* TABLES */
table {font-size:inherit;}               /* om de lettergrootte in de editor gelijk te zetten */
table tr {}
table tr th {}
table tr td { vertical-align:top;}

/* DNN SPECIFIC */
.Head, .SubHead, .SubSubHead, .Normal, .NormalTextBox, .NormalRed, .NormalBold, .CommandButton { font-family: inherit; color:inherit; line-height:inherit; font-size:inherit}
.Head { font-size:15px;}          /* style for module titles */
.SubHead {font-size:14px;}        /* style of item titles on edit and admin pages */
.SubSubHead { font-size:13px;}    /* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.NormalBold { font-weight:bold;}

.CommandButton {}                  /* text style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {}            /* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:visited {}
A.CommandButton:hover {}    
A.CommandButton:active {}

.StandardButton {}                 /* button style for standard HTML buttons */

/* COMMON  ISSUES */
img {border:0px;}                  /* geen standaard rand bij afbeeldingen wanneer er gelinkt wordt */

input[type=submit], input[type=button] {}
input[type=submit]:hover, input[type=button]:hover {}
	
* { transition:background-color 0.3s ease;  -webkit-transition:background-color 0.3s ease;}

/* DNN tab fix*/
ul.dnnAdminTabNav { height:auto !important}
html > body > form #ControlBar_ControlPanel { z-index:1202 !important}


/* Clearfix */
.clear{clear:both; display:block; height:0; overflow:hidden; visibility:hidden; width:0;}
.clearfix:after{clear:both; content:'.'; display:block; font-size:0; height:0; line-height:0; visibility:hidden; width:0;}
* html .clearfix,:first-child+html .clearfix{zoom:1;}   


/* ================================================================================ 
                                     TEXT STYLING
   ================================================================================ */
.Knop { display:inline-block; color:#fff; padding:0 15px; font-weight:700; height:32px; line-height:33px; border-width:1px; border-style:solid; cursor:pointer; text-transform:uppercase; margin:15px 0 }  
#Wrapper a.Knop:link, #Wrapper a.Knop:visited, #Wrapper a.Knop:active {color:#fff;} 
.Knop:hover {text-decoration:none; background-color:#fff;}    

/* ================================================================================ 
                                     MAIN LAYOUT
   ================================================================================ */
.ControlPanel { }

#Wrapper {min-height:100%; background-color:#ffffff; text-align:left;}
.InnerWrapper { margin:0px auto; padding: 0 10px; max-width:960px; position:relative;}

/* HEADER SECTION  */
#TopHeader{ padding: 5px 0px; text-align: right;}
#TopHeader a {display:inline-block; vertical-align:middle; padding:0px 5px;}
#TopHeader .TopHeaderPane{display:inline-block; vertical-align:middle;}
#TopHeader a:before{content:""; font-family:"Ionicons"; display:inline-block; vertical-align:middle; padding-right:5px;}
#TopHeader a.inloggen:before{content:"\f200"}
#TopHeader a.mijnschool:before{content:"\f2f9"}
#TopHeader a.dashboard:before{content:"\f13e"}

.TopHeaderPane .DnnModule > a[name] { display:none !important;}

#Header {min-height:50px; }
#Logo { background-color:#fff; position:absolute; top:0; left:0; max-width:170px; padding:20px 10px; z-index:911; border-style:solid; border-width:1px; border-top-width:0; z-index:1003;}
#Logo a { display:block}
#Logo a img { max-width:100%}

#Menu { position:absolute; right:60px; padding-left:190px; z-index:1001  }
#MobileMenuTrigger { position:absolute; right:0px; top:0; height:50px; width:50px; z-index:980; overflow:hidden; font-family: "Ionicons"; font-size:32px; vertical-align:middle; text-align:center; color:#fff; display:none;  cursor:pointer; }


/* SEARCH  */
#Search { position:absolute; right:0; top:0; height:50px; width:50px; z-index:1050; overflow:hidden; transition:width 0.2s ease; -webkit-transition:width 0.2s ease; }
#Search.active { width:240px;}
#Search #dnn_dnnSEARCH_ClassicSearch { white-space:nowrap; position:relative; display:block; height:50px;}
#Search .SkinObject{font-family: "Ionicons"; font-size:32px; vertical-align:middle; height:50px; width:50px; color:#fff !important; display:block; text-align:center;position:absolute; right:0; top:0;}  
#Search .SkinObject:hover { text-decoration:none !important}
#Search #dnn_dnnSEARCH_ClassicSearch .searchInputContainer{ position:absolute !important; right:55px; top:0; padding:10px 0 10px 10px}
#Search .NormalTextBox { -webkit-appearance:none; height:30px; border:0; padding:0 10px; width:160px}
#Search .NormalTextBox:focus { outline:none} 
#Search .searchSkinObjectPreview, #Search .searchInputContainer a.dnnSearchBoxClearText  {display:none !important;  }

/* BREADCRUMB SECTION */
#Breadcrumb { color:#000; text-transform:uppercase; font-weight:600; font-size:12px; }
#Breadcrumb .SkinObject, #Breadcrumb a, #Breadcrumb a:link, #Breadcrumb a:visited {color:#000 }

/* PANES SECTION */
#Content {padding-top:35px; }
#Content .Container { margin-bottom:45px;}
#Content .GoogleMapsPane .Container { margin-bottom:0px;}
.SubTab #Content .Container {margin-bottom:20px;}

.one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth { float:left; margin-right:4%; box-sizing:border-box; -webkit-box-sizing:border-box;}
.one-half.last, .one-third.last, .two-third.last, .one-fourth.last, .three-fourth.last, .one-fifth.last, .two-fifth.last, .three-fifth.last, .four-fifth.last, .one-sixth.last, .five-sixth.last  { margin-right:0;}

.one-half { width:48%;}
.one-third { width:30.66%;}
.two-third { width:65.33%;}
.one-fourth { width:22%;}
.three-fourth { width:74%;}
.one-fifth {width:16.8%}
.two-fifth { width:37.6}
.three-fifth { width:58.4%}
.four-fifth { width:79.2%}
.one-sixth {width:13.33%}
.five-sixth {width:82.66%}

/* ================================================================================ 
                               PANES SPECIFIEKE STYLING
   ================================================================================ */

.HomeTab .BannerPane{  min-height:100px; max-height:425px; max-height:42vh;  overflow:hidden;}   


.row3 {padding:45px 0;}
.SchoolFilmPane, .NieuwsBriefPane, .TwitterPane {padding:25px 0 0 0;}

.SubTab .SchoolNieuwsPaneWrapper { display:none} 
.SubTab .row1  {padding-top:45px;} 
.SubTab #SubMenu {padding-top:60px;} 


/* ================================================================================ 
                                    FOOTER
   ================================================================================ */
#Footer {  min-height:50px;}
#Footer #Logo2 {  background-color:#fff; position:absolute; top:0; left:0; max-width:155px; padding:20px 10px; margin-bottom:20px; z-index:911; border-style:solid; border-width:1px;  }
#Footer #Logo2 a { display:block}
#Footer #Logo2 a img { max-width:70%; display:block; margin:0 15%; }
#Footer .FooterPane {margin:0 230px; padding-top:13px; color:inherit}
#Footer .FooterPane a:link, 
#Footer .FooterPane a:visited, 
#Footer .FooterPane a:active {color: inherit}
#Footer .SocialMediaIcons {position:absolute; top:0; right:0;  z-index:911; max-width:230px}

/* LOGIN  */	
#Login {  display:inline-block; vertical-align:top }
#Login a.LoginKey {font-family: "Ionicons"; font-size:18px; opacity:0; transition:opacity 0.3s ease; -webkit-transition:opacity 0.3s ease;   margin:0 10px 0 0;border-width:2px; border-style:solid; font-size:18px; background-color:#fff; border-radius:50%; line-height:27px; text-align:center; width:27px; height:27px; display:inline-block; vertical-align:top; zoom:1; *display:inline; }
#Login a.LoginKey:hover { text-decoration:none; opacity:1;}

.SWSPromo { height:50px; text-align:right; font-size:11px; line-height:50px;}

/*SocialMedia*/
.SocialMediaIconsPane{  display:inline-block; vertical-align:top}
.SocialMediaIcons {padding-top:10px; color:#fff;}
.SocialMediaIcons .SocialMediaIcon {font-family: "Ionicons"; margin:0 10px 0 0;border-width:2px; border-style:solid; font-size:18px; background-color:#fff; border-radius:50%; line-height:27px; text-align:center; width:27px; height:27px; display:inline-block; vertical-align:top; zoom:1; *display:inline; }
.SocialMediaIcons .SocialMediaIcon[title="facebook"] { font-size:24px; line-height:29px;}
.SocialMediaIcons .SocialMediaIcon:hover { text-decoration:none; color: inherit; border-color: currentColor} 

/* ================================================================================ 
                                     MENU'S
   ================================================================================ */
   
/* =================== 
        RADMENU 
   =================== */  
   
   
/* Root Items */  
.RadMenu_MainMenu { z-index:910 !important; float:none !important;}
.RadMenu_MainMenu .rmRootGroup { background-color:transparent !important; border-width:0 !important;}
.RadMenu_MainMenu .rmRootGroup .rmItem { margin:0px; padding:0px; }
.RadMenu_MainMenu .rmRootGroup .rmItem .rmLink { margin:0px; padding:0px; cursor:pointer; text-decoration:none;  color:#fff;}
.RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText {font-family: 'Exo', sans-serif; margin:0px; padding:0 15px; font-size:17px; line-height:50px; height:50px; display:block; white-space:normal; color: inherit;}
.RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText:hover, .RadMenu_MainMenu .rmRootGroup .rmItem .rmExpanded .rmText,.RadMenu_MainMenu .rmRootGroup .rmItem .rmExpanded.rmSelected .rmText  { background-color:#fff; } 
.RadMenu_MainMenu .rmRootGroup .rmItem .rmSelected .rmText{ background-color:#fff; background-color:rgba(255,255,255,0.9); } 

/* Sub Items */
.RadMenu_MainMenu .rmGroup .rmItem { margin:0px; padding:0px; }
.RadMenu_MainMenu .rmGroup .rmItem .rmLink { margin:0px; padding:0px; cursor:pointer; text-decoration:none; background-color:#fff; border-left:1px solid; border-right:1px solid}
.RadMenu_MainMenu .rmGroup .rmItem.rmLast .rmLink { border-bottom:1px solid}
.RadMenu_MainMenu .rmGroup .rmItem .rmLink .rmText { margin:0px; padding:6px 15px; line-height:20px; height:20px;  font-size:17px;  display:block; white-space:nowrap; background-color:#fff; min-width:200px; }
.RadMenu_MainMenu .rmRootGroup .rmGroup.rmLevel1 .rmItem.rmFirst >.rmLink {padding-top:16px;}
.RadMenu_MainMenu .rmRootGroup .rmGroup.rmLevel1 .rmItem.rmLast >.rmLink{padding-bottom:16px;}
.RadMenu_MainMenu .rmRootGroup .rmGroup.rmLevel2 .rmItem.rmFirst >.rmLink {padding-top:0;}
.RadMenu_MainMenu .rmRootGroup .rmGroup.rmLevel2 .rmItem.rmLast >.rmLink{padding-bottom:0;}    
.RadMenu_MainMenu .rmRootGroup .rmGroup .rmItem .rmLink .rmText:hover, .RadMenu_MainMenu .rmGroup .rmItem .rmLink.rmSelected .rmText {color:#fff !important; }



/* =================== 
       RADPANELBAR 
   =================== */
/* Root Items */  
.RadPanelBar_MainMenu { z-index:910 !important; margin:0px !important; padding:0px !important; border:0px !important; }
.RadPanelBar_MainMenu .rpRootGroup { margin:0px !important; padding:0px !important; border:0px !important; }
.RadPanelBar_MainMenu .rpRootGroup .rpItem { margin:0px !important; padding: px !important; border:0px !important; }
.RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink { margin:0px !important; padding:0px !important; border:0px !important; cursor:pointer; }
.RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink .rpOut { margin:0px !important; padding:0px !important; border:0px !important; display:block;}
.RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink .rpOut .rpText { margin:0px !important; padding:0px !important; border:0px !important; display:block; white-space:normal; font-size:20px; min-height:35px;  color:#000; font-family: 'Exo', sans-serif; }
.RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink .rpOut .rpText:hover, .RadPanelBar_MainMenu .rpRootGroup .rpItem .rpSelected .rpOut .rpText { text-decoration:none !important; font-weight:700;}

/*.RadPanelBar_MainMenu .rpRootGroup .rpItem.rpLast .rpLink .rpOut .rpText { margin-bottom:40px !important}*/
.RadPanelBar_MainMenu .rpGroup .rpItem.rpLast .rpLink .rpOut .rpText { margin-bottom:0px !important}

/* Sub Items */   
.RadPanelBar_MainMenu .rpGroup { margin:0px !important; padding:0px !important; border:0px !important; }
.RadPanelBar_MainMenu .rpGroup .rpItem { margin:0px !important; padding:0px 0px 0px 15px !important; border:0px !important; }
.RadPanelBar_MainMenu .rpGroup .rpItem .rpLink { margin:0px !important; padding:0px !important; border:0px !important; cursor:pointer; }
.RadPanelBar_MainMenu .rpGroup .rpItem .rpLink .rpOut { margin:0px !important; padding:0px !important; border:0px !important; display:block;}
.RadPanelBar_MainMenu .rpGroup .rpItem .rpLink .rpOut .rpText { margin:0px !important; padding:0px 0px 0px 0px !important; border:0px !important; display:block; white-space: normal;}
.RadPanelBar_MainMenu .rpGroup .rpItem .rpLink .rpOut .rpText:hover { text-decoration:none !important;}
.RadPanelBar_MainMenu .rpGroup .rpItem .rpSelected .rpOut .rpText { } 


/* new menu */

/* #Menu { position:relative; z-index:960; isolation:isolate; padding:0;  } */
#Wrapper .DesktopMenu .RadMenu_MainMenu .rmHorizontal{white-space: nowrap; position:relative; display: flex; flex-wrap:wrap;}
#Wrapper .DesktopMenu .RadMenu_MainMenu ul,
#Wrapper .DesktopMenu .RadMenu_MainMenu li { margin:0px; padding:0px; list-style:none;}   

/* !!!!!!!!!!   Fake RadMenu */

/* --ROOT-- */
#Wrapper .DesktopMenu .rmHorizontal .rmSlide {display:block !important; box-sizing:border-box;  z-index:111; top:100%; left:0; overflow:hidden;  height:0; position: absolute; }
#Wrapper .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmLast > .rmSlide {left:auto; right:0}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup {opacity:0; transition:opacity 0.3s ease, transform 0.3s ease; transform:translate(0,-10px);   } 
#Wrapper .DesktopMenu .rmHorizontal .rmItem {margin: 0px;  padding: 0px; position: relative; clear: none; }
#Wrapper .DesktopMenu .rmHorizontal .rmItem .rmLink {  cursor: pointer;   text-decoration: none; display:block;  margin: 0px;  padding: 0px;  }  
#Wrapper .DesktopMenu .rmHorizontal .rmItem .rmLink .rmText{width:100%; box-sizing: border-box;  padding:0px 15px;   line-height: 50px;  height: 50px;  font-size: 17px;   display: block;  white-space: normal;  }
/*first,last,only*/
#Wrapper .DesktopMenu .rmHorizontal .rmItem.rmFirst{}
#Wrapper .DesktopMenu .rmHorizontal .rmItem.rmLast {}
#Wrapper .DesktopMenu .rmHorizontal .rmItem.rmOnly {}
/*expanded,hover,selected,breadcrumb*/
#Wrapper .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText  {}
#Wrapper .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink .rmText {}
#Wrapper .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmSelected > .rmLink > .rmText {}
#Wrapper .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmBreadcrumb > .rmLink > .rmText {}

/*--SUB--*/
#Wrapper .DesktopMenu .rmHorizontal .rmLevel0 .rmGroup  {transform:translate(-20px, 0px); }
#Wrapper .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide { overflow:visible; height:auto; transform:translate(0px, 0px); padding:0px; border-radius:15px;}
#Wrapper .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide > .rmGroup {opacity:1; transform:translate(0px, 0px);}  
#Wrapper .DesktopMenu .rmHorizontal .rmSlide .rmItem:hover .rmSlide  {left:100%; top:0;}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem {width:100%; margin:0;}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink {margin:0; padding:0; width:100%; display:block;}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText{ min-width:175px;   line-height:32px; height:32px;  font-size:18px; padding:0 30px; white-space:nowrap;}
/*first,last,only*/
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst {}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst > .rmLink > .rmText{}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmLast > .rmLink > .rmText{}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmOnly > .rmLink > .rmText{}
/*expanded,hover,selected,breadcrumb*/
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText  {}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem:hover > .rmLink .rmText {}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmSelected > .rmLink > .rmText {}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmBreadcrumb  > .rmLink > .rmText {}

/* colors: */
/* #Wrapper .DesktopMenu .rmHorizontal .rmItem .rmLink .rmText{color:#000;}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText { color:#a470b2; }
#Wrapper .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink .rmText {color:#a470b2; background-color:#fff; }
#Wrapper .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmSelected > .rmLink > .rmText {color:#a470b2; background-color:#fff; }
#Wrapper .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmBreadcrumb > .rmLink > .rmText {color:#a470b2; background-color:#fff; }
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem:hover > .rmLink .rmText {color:#fff; background-color: #a470b2;}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmSelected > .rmLink > .rmText {color:#fff; background-color: #a470b2;}
#Wrapper .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmBreadcrumb  > .rmLink > .rmText {color:#fff; background-color: #a470b2;} */




/* !!!!!!!!!!   Fake Panelbar / submenu */
#Wrapper .DesktopMenu  ul.rmRootGroup.rmVertical  {width:100%;   position: relative;    z-index: 100;}
#Wrapper .DesktopMenu .rmVertical .rmSlide {position:static}
#Wrapper .DesktopMenu .rmVertical .rmGroup{transform:translateY(0px); transform:translateX(0px);}
#Wrapper .DesktopMenu .RadMenu ul.rmRootGroup{ background-color:transparent; border:0;}
#Wrapper .DesktopMenu .RadMenu { background-color:transparent; border:0;}
#Wrapper .DesktopMenu .rmVertical .rmItem {width: 100%; padding:0}
#Wrapper .DesktopMenu .rmVertical .rmItem .rmLink .rmText{ min-width:100px; background-color:transparent;  color:#000; font-size:20px; height:35px; line-height:35px; padding:0; }
#Wrapper .DesktopMenu .rmVertical .rmItem .rmLink {border:none;}
#Wrapper .DesktopMenu .rmVertical .rmSlide  {display:none !important}
#Wrapper .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide   {display:block !important; height:auto; }
#Wrapper .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide > .rmGroup  {opacity:1}
 /*sub*/
#Wrapper .DesktopMenu .rmVertical .rmSlide .rmItem {padding-left:20px;}
/*expanded,hover,selected,breadcrumb */
#Wrapper .DesktopMenu .rmVertical .rmItem .rmLink:hover { text-decoration:none !important}
#Wrapper .DesktopMenu .rmVertical .rmItem:has(.rmSlide:hover) > .rmLink > .rmText  { color:#179F94 !important; font-weight:700;}
#Wrapper .DesktopMenu .rmVertical .rmItem:hover > .rmLink > .rmText { color:#179F94 !important; font-weight:700;}
#Wrapper .DesktopMenu .rmVertical .rmItem .rmSelected > .rmLink > .rmText { color:#179F94; font-weight:700;}
#Wrapper .DesktopMenu .rmVertical .rmItem.rmBreadcrumb  > .rmLink > .rmText { color:#179F94;font-weight:700;}




/* ================================================================================ 
                                 MOBILE MENU
   ================================================================================ */  
#MobileMenu{ position:fixed; z-index:9999; height:100%; height:100vh; width:100%; max-width:100vh; background-color:rgba(0,0,0,0);   top:0; left:-100%; left:-100vw; display:none; transition:left 0.5s ease; -webkit-transition:left 0.5s ease;

background: -moz-linear-gradient(left, rgba(0,0,0,0.75) 23%, rgba(0,0,0,0.75) 87%, rgba(0,0,0,0.07) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left, rgba(0,0,0,0.75) 23%,rgba(0,0,0,0.75) 87%,rgba(0,0,0,0.07) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right, rgba(0,0,0,0.75) 23%,rgba(0,0,0,0.75) 87%,rgba(0,0,0,0.07) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

 }
#MobileMenu.active{left:0; }
#MobileMenu nav { max-width:400px; height:100%; height:100vh; overflow-y:scroll;box-sizing:border-box; -webkit-box-sizing:border-box; padding:15px; color: inherit; font-size:16px; }
#MobileMenu .MobileMenuHeader { border-bottom:1px solid rgba(255,255,255,0.6); padding:0 0 10px 0}
#MobileMenu #MenuClose {font-family: "Ionicons"; font-size:28px; color:#fff; text-align:center; cursor:pointer; float:right; display:inline-block; width:40px; height:40px; }
#MobileMenu .MobileMenuTitel{ float:left; display:inline-block; font-size:28px; font-weight:700;	   } 
#MobileMenu #MobielZoeken{ padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.6);}
#MobileMenu #MobielZoeken .MobielZoekenheader { font-weight:700; display:inline-block; padding:0 15px 0 0}
#MobileMenu #MobielZoeken #MobielZoekenheaderInput { appearance:none; -webkit-appearance:none; height:32px; padding: 0px 5px; border:0; border-radius:0;}
#MobileMenu #MobielZoeken #MobielZoekenheaderInputTrigger {font-family: "Ionicons"; font-size:32px; color: inherit; display:inline-block; vertical-align:middle; padding:0 10px; cursor:pointer}

#MobileMenu #MobileNav { position:relative}
#MobileMenu #MobielSpinner { height:70px; width:70px; position:absolute; left:50%; top:50%; margin:-35px 0 0 -35px; color:rgba(255,255,255,0.5); line-height:1; text-align:center; font-family: "Ionicons"; font-size:70px; opacity:0 }
#MobileMenu #MobielSpinner.active { opacity:1; animation: spinner 2s linear infinite; -webkit-animation: spinner 2s linear infinite;  }

@keyframes spinner{
  0% { transform: rotate(0deg); }  
  100% {transform: rotate(360deg); }  
}

@-webkit-keyframes spinner{
  0% { -webkit-transform: rotate(0deg); }  
  100% {-webkit-transform: rotate(360deg); }   
}

#MobileMenu ul {list-style:none;}
#MobileMenu #MobiNav {padding:10px 0 50px 0; margin:0;}
#MobileMenu #MobiNav a:link, #MobileMenu #MobiNav a:visited  { }
#MobileMenu #MobiNav a ~.subLevel {}
#MobileMenu #MobiNav > li { border-bottom:1px solid rgba(255,255,255,0.3);}
#MobileMenu #MobiNav > li.haschild {padding:0 40px 0 10px; overflow:hidden}
#MobileMenu #MobiNav li{ display:block; min-height:30px; line-height:30px; box-sizing:border-box; -webkit-box-sizing:border-box; padding:10px 0 10px 10px; position:relative }
#MobileMenu #MobiNav li.haschild {padding:10px 0 10px 10px; overflow:hidden}
#MobileMenu #MobiNav li.haschild .GetSubLevel  {-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; font-family:Arial, Helvetica, sans-serif; text-decoration:none !important;color:#fff; text-align:center; height:38px; line-height:38px; width:38px; border-style:solid; border-width:1px; text-align:center; font-size:32px; display:inline-block; position:absolute; top:5px; right:0; z-index:1000}
#MobileMenu #MobiNav li.haschild.active >.GetSubLevel { background-color:#fff;}
#MobileMenu #MobiNav li.haschild .GetSubLevel:after {content:"+"}
#MobileMenu #MobiNav li.haschild.active > .GetSubLevel:after{content:"-"}
#MobileMenu #MobiNav li a {-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; display:block; overflow:hidden; text-overflow:ellipsis; color: inherit !important; width:calc( 100% - 70px); position:relative; z-index:900;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#MobileMenu #MobiNav .subLevel { display:none}
#MobileMenu #MobiNav li.haschild.active  > .subLevel { display:block} 


/* ================================================================================ 
                                 SCROLL 2 TOP
   ================================================================================ */
#back-to-top, .touch-device #back-to-top:hover { opacity:0.6; bottom:10px; display:none; height:45px; position:fixed;	right:10px; text-shadow:none; -webkit-transition:all .2s ease; transition:all .2s ease; width:45px; z-index:980;	line-height:45px; text-align:center; font-family: "Ionicons"; font-size:28px;; color:#fff;}
#back-to-top:hover {opacity:1; text-decoration:none;}


/* ================================================================================ 
                                    SocialShare
   ================================================================================ */
.SocialShare { float:right; margin:15px 0}
.SocialShare .SocialShareLabel { float:left; line-height:32px;}
.SocialShare:after{ content: ""; display:block; clear:both;}	 
.SocialShare [class^="SS_"] {cursor:pointer; display: block; width: 32px; height: 32px; font-size: 26px; text-align:center; line-height: 32px; margin: 0 0 0 10px; float: left;  position: relative;}
.SocialShare [class^="SS_"]:before { font-family: 'Ionicons'; color: #fff; display:block; content: ""; width: 100%; height: 100%; border-width:1px; border-style:solid }
.SocialShare [class^="SS_"]:hover:before { background-color:#fff !important}
.SocialShare .SS_FaceBook { }
.SocialShare .SS_FaceBook:before { content: "\f231";}
.SocialShare .SS_Google { }
.SocialShare .SS_Google:before { content: "\f235";}
.SocialShare .SS_LinkedIn {}
.SocialShare .SS_LinkedIn:before { content: "\f239";}
.SocialShare .SS_Twitter { }
.SocialShare .SS_Twitter:before { content: "\f243";}	 
   


/* ================================================================================ 
                                 PUBLICATIE MODULE
   ================================================================================ */
/* ARTICLE LIST */
.pubControls {padding-bottom:10px}

.pubArticleList{}
.pubArticleList .pubItem {padding-bottom:20px;}
.pubArticleList .pubItem .pubThumbNail { height:120px; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.pubArticleList .pubItem .pubLink { font-size:22px; font-family:"Exo", sans-serif; font-weight:700;  }
.pubArticleList .pubItem .pubMetaData { font-size:12px; padding-bottom:5px; color:#333;}
.pubArticleList .pubItem .pubReturnLink { float:left}

/* ARTICLE DETAILS */
.pubArticleDetails {}
.pubArticleDetails h1 { font-size:50px; }
.pubArticleDetails .pubMetaData { color:#333; font-size:12px; padding-bottom:5px;}
.pubArticleDetails .pubContent { margin-bottom:10px;}
.pubArticleDetails .pubReturnLink { overflow:hidden;}
.pubArticleDetails .pubReturnLink a { float:right;}

/* ARTICLE VIEWER */
.pubBannerWrapper{}
.pubBannerWrapper .pubItem{ height:425px; height:42vh; width:100%; background-repeat:no-repeat; background-size:cover; background-position:center center; }
.pubBannerWrapper .pubItem .pubTitle,
.pubBannerWrapper .pubItem .pubSummary { display:none;}


.pubArticleHomeViewer {}
.pubArticleHomeViewer h1 { color:#fff; text-align:center; padding:0 0 45px 0}
.pubArticleHomeViewer .pubItem {}
.pubArticleHomeViewer .pubItem.pubItemNumber4 { margin-right:0;}
.pubArticleHomeViewer .pubItem .pubThumbnail { height:140px; background-position:center center; background-repeat:no-repeat; background-size:cover}
.pubArticleHomeViewer .pubItem .pubTitle {font-size:22px; color:#fff;  font-family: 'Exo', sans-serif; font-weight:700; padding:20px 0; line-height:1.25; min-height:55px;}
.pubArticleHomeViewer .pubItem .pubSummary { color:#fff; padding:0 0 20px 0; min-height:65px;}
#MeerNieuws { display:none}

/* COMMENT VIEWER */
.pubCommentViewer .pubItem {}
.pubCommentViewer .pubItem .pubMetaData {font-size:11px; color:#999;}

/* SIDEBAR */
.pmsb_wrap { }
.pmsb_wrap .pm_block.sb_searchinputbox { display:none}
.pmsb_wrap .pm_block .pm_block_header { font-size:22px; font-weight:400; font-family:'Exo', sans-serif }
.pmsb_wrap .pm_block ul { }
.pmsb_wrap .pm_block ul li {  }
.pmsb_wrap .pm_block ul li a,
.pmsb_wrap .pm_block ul li span {  }
.pmsb_wrap .navBlockItemLink, #linkBack { color:#444 !important}

/* VIEWER TEAM*/
.pubItemTeam { float:left; width: 20%; margin-right:5%; }
.pubArticleViewer .pubItemTeam .pubContent {margin:5px 0 15px 0;}
.pubMetaData { font-size:12px; padding-bottom:5px; color:#333; }
.pubArticleViewer .pubItemTeam  .pubThumbNail { height:165px; background-position:center center; background-repeat:no-repeat; background-size:cover;}

/* ================================================================================ 
                                 flickity
   ================================================================================ */
.flickity-enabled { position: relative;}
.flickity-enabled:focus { outline: none;}
.flickity-viewport { overflow: hidden; position: relative; height: 100%;}
.flickity-slider {  position: absolute;  width: 100%; height: 100%;}

/* draggable */
.flickity-enabled.is-draggable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab;}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing;}

	
/* ---- page dots ---- */
.flickity-page-dots { position: absolute; width: 100%; bottom: 25px; padding: 0; margin: 0; list-style: none; text-align: center;  line-height: 1;}
.flickity-rtl .flickity-page-dots { direction: rtl;}
.flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 6px; background: #fff; border-radius: 50%; cursor: pointer; border:2px solid #fff;}
.flickity-page-dots .dot.is-selected { }


/* ================================================================================ 
                                TWitterModule
   ================================================================================ */
.TweetItemList .TweetItem { overflow:hidden}
.TweetItemList .TweetItem .TwitterImage { max-width:30%; float:left;}
.TweetItemList .TweetItem .TwitterText { max-width:60%; float:right; word-break:normal}
.DnnModule ul.TweetItemList { max-width:100% !important}

/* ================================================================================ 
                               Google MAps
   ================================================================================ */
#map-canvas {height:400px; height:40vh;}
#map-canvas .gmnoprint { display:none}

/* ================================================================================ 
                               Events Module
   ================================================================================ */

td.EventNextPrev + td { font-family: 'Exo', sans-serif; color:#000}
.DetailEventDetails1 .EventDetailsText {padding-bottom:15px;}
.DetailEventDetails1 ~ .DetailCommands li { color:#fff;}
.DetailEventDetails1 ~ .DetailCommands li > a { text-shadow:none; box-shadow:none; background:none; border-radius:0; display:inline-block; color: inherit !important; padding:0 15px; font-weight:700; height:32px; line-height:33px; border-width:1px; border-style:solid; cursor:pointer; text-transform:uppercase; margin:15px 0}
.DetailEventDetails1 ~ .DetailCommands li > a:hover { background-color:#fff;}
.DetailEventDetails1 ~ .DetailCommands li > a[title="Printen"] { display:none}

.ModDNNEventsC  .ListDataGrid, 
.ModDNNEventsC  .ListDataGrid td,
.ModDNNEventsC .ListDataGrid tr,
.ModDNNEventsC .ListDataGrid td.ListDescription {border:0 !important; background-color:transparent !important}
.ModDNNEventsC .EvtDateControls {padding-bottom:20px;}
.ModDNNEventsC .EventItem {padding-bottom:30px; font-family: 'Exo', sans-serif; }
.ModDNNEventsC  .EventItem .EventTitle { border:0 !important; background-image:none; text-align:left; background-color:transparent !important; height:auto !important; font-size:22px !important; }
.ModDNNEventsC .EventItem .EventTitle a {font-family: 'Exo', sans-serif;}
.ModDNNEventsC  .EventItem .EventDate { font-weight:700; text-transform:uppercase}



/* ================================================================================ 
                               FOTO Module
   ================================================================================ */
.ModSimpleGalleryC {}
.view{ border-collapse:collapse; padding:0; width:100%}
.view .album-item { padding:10px 4px; text-align:left !important}
.view .album-item >img { height:auto !important; width:100% !important; border:0 !important}

.View { border-collapse:collapse; padding:0; width:100%}
.View .photo-frame { text-align:left; width:100%; padding:0;border-collapse:collapse; }
.View .photo-frame ~ span { text-align:center; display:block; padding-bottom:10px;}
.View .photo-frame .mid--x,.View .photo-frame .midx-- { width:0; display:none}
.View .photo-frame td[valign="top"] { width:100%;}
.View .photo-frame td a { display:block; padding-left:4px;}
.View .photo-frame td a img { border:0 !important; height:auto !important; max-width:100% !important}

/* ================================================================================ 
                               NieuwsBrieven Module
   ================================================================================ */
.NewsletterSubscription{}
.NewsletterSubscription .SubScriptionInput input{ width:100%; border: 1px solid #c9c9c9; background:#ffffff; border-radius:3px; padding:8px; box-sizing:border-box; -webkit-box-sizing: border-box; }
.NewsletterSubscription .SubscriptionActions {}


/* ================================================================================ 
                               Formulieren Module
   ================================================================================ */
.DnnModule-EngageSurvey {}
.DnnModule-EngageSurvey .survey-listing{}
.DnnModule-EngageSurvey .survey-listing ul.sl-repeater {border-width:1px; border:0;}
.DnnModule-EngageSurvey .survey-listing ul.sl-repeater li { background:none;border:0; border-bottom-width:1px; border-top-style:solid; padding:15px 0; }
.DnnModule-EngageSurvey .survey-listing ul.sl-repeater li span.sl-repeater-data { width:auto !important}
.DnnModule-EngageSurvey .survey-listing ul.sl-repeater li span.sl-repeater-data .sl-title { font-size:22px; font-family: 'Exo', sans-serif; }

.DnnModule-EngageSurvey .survey-title { font-size:22px; font-family: 'Exo', sans-serif; padding-top:30px;}
.DnnModule-EngageSurvey .section-wrap {}
.DnnModule-EngageSurvey .section-wrap .question { font-weight:400;}
.DnnModule-EngageSurvey .section-wrap input[type="text"]{ display:block; width:75%; max-width:450px;  margin-bottom:5px; border:1px solid #c9c9c9; padding:8px; box-shadow:0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1); color:#333; border-radius:3px;}
.DnnModule-EngageSurvey .section-wrap select {display:block; width:75%; max-width:250px;  margin-bottom:18px; border:1px solid #c9c9c9; padding:8px; box-shadow:0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1); color:#333; border-radius:3px;}
.DnnModule-EngageSurvey input[type="submit"]{color:#fff; margin:25px 15px 0 0; text-shadow:none; box-shadow:none; background:none; border-radius:0; display:inline-block; color: fff; padding:0 15px; font-weight:700; height:32px; line-height:33px; border-width:1px; border-style:solid; cursor:pointer; text-transform:uppercase; }
.DnnModule-EngageSurvey input[type="submit"]:hover {background-color:#fff;}

ul.sl-repeater li span.sl-repeater-actions { clear:both; padding-top:20px;}

/* ================================================================================ 
                               Contact Module
   ================================================================================ */
.ModLesscherContactFormC .dnnFormItem input[type="submit"]{text-shadow:none; box-shadow:none; background:none; border-radius:0; display:inline-block; color: fff; padding:0 15px; font-weight:700; height:32px; line-height:33px; border-width:1px; border-style:solid; cursor:pointer; text-transform:uppercase; margin:15px 0}
.ModLesscherContactFormC .dnnFormItem input[type="submit"]:hover {background-color:#fff;}

/* ================================================================================ 
                                SEARCH RESULTS
   ================================================================================ */
.dnnSearchResultPanel { display:none}
.dnnSearchResultAdvancedTip { display:none}
.dnnSearchBox_advanced { display:none}
.dnnSearchResultItem-Link { display:none;}
.dnnSearchBoxPanel .dnnSearchBox { margin-left:0; margin-right:0; width:auto !important;}
#dnnSearchResult_dnnSearchBox_input { position:relative; width:auto !important; background-color:transparent}
.dnnSearchBox > a.dnnSearchButton { right:7px !important;}
.dnnSearchBox > a.dnnSearchBoxClearText { right:35px !important; top:5px;}
.pubArticleViewer.Search .pubItem { padding:15px 0;}

/* ================================================================================ 
                                CONTAINER LAYOUT'S
   ================================================================================ */
.Container {}
.ContainerHeader { }
.ContainerContent {}
.ContainerContent .ModDNNHTMLC img{ max-width:100%}
.ContainerFooter {}


/*fonts*/
.Font1{font-family: 'Exo', sans-serif; } 
.Font2{font-family: 'Lily Script One', cursive; } 
 


/* ================================================================================ 
                                   MEDIA QUERIES
   ================================================================================ */
   
@media only screen and (max-width: 768px) {	
	.InnerWrapper { max-width:480px}
	.RadMenu, .RadPanelBar, #Search, #Footer #Logo2, #Login, .flickity-page-dots, #SubMenu, #Breadcrumb, #icrPager, .pubControls, .SWSPromo  {display:none;}	
	#MobileMenuTrigger, #MobileMenu	{display:block;}
	.one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth {float:none; margin-right:0; width:100%;}	
	
	/*Header*/
	#Header .InnerWrapper{ max-width:none;}
	#Header #Logo { left:10px;}
	#Header #Logo a { max-height:125px; overflow:hidden }
	#Header #MobileMenuTrigger {right:10px;}
	
	/*aanpassinge Paddings en Fonts*/
	h1 { font-size:30px; padding:0;}	
	h2 { padding:10px 0 0 0; font-size:30px}
	.pubArticleHomeViewer h1 {padding:0 0 10px 0}
	.pubArticleHomeViewer .pubItem { padding:0 0 20px 0}
	.pubArticleHomeViewer .pubItem .pubSummary { padding:0;}
	.pubArticleHomeViewer .pubItem .pubTitle { padding:20px 0 10px 0}
	.SubTab .row1 {padding-top:75px;}
	.row3 {padding:10px 0 0 0}
	.SchoolFilmPane, .NieuwsBriefPane, .TwitterPane {padding:0}	
	#Content .Container {margin-bottom:25px;}
	
	/*events*/
	.ModDNNEventsC .ThemeMinimalExtropy .EventItem {padding-bottom:15px;}
	.ThemeDefault .EventDay .EventDayScroll > div > a { padding:0 !important; width:23px !important; text-indent:30px; position:relative}
	.ThemeDefault .EventDay .EventDayScroll > div > a:before { content:"\f14a"; color:#fff !important; width:23px; height:23px; line-height:23px; text-align:center; position:absolute; left:0; top:0; text-indent:0;  font-family: 'Ionicons'; font-size:19px; }
	
	/*LightBox Aanpassingen voor PhotoModule*/
	#jquery-lightbox {}
	#jquery-lightbox #lightbox-container-image-box { width:auto !important; height:100% !important; min-height:150px;  }
	#jquery-lightbox #lightbox-container-image-box #lightbox-image { width:100% !important;  }
	#jquery-lightbox #lightbox-container-image-data-box { width:100% !important}
	#jquery-lightbox #lightbox-container-image-details-currentNumber { display:none !important;}
	#jquery-lightbox #lightbox-container-image-details-nav{ display:none !important;}	
	

	/*ContactFormulier */
	.ModLesscherContactFormC {}
	.ModLesscherContactFormC .dnnFormItem{}
	.ModLesscherContactFormC .dnnFormItem .dnnLabel { width:100%; text-align:left; padding:0 !important; margin:0 !important}
	.ModLesscherContactFormC .dnnFormItem .dnnLabel + input[type="text"] { width:100% !important; padding:8px 0 !important; max-width:none !important }
	.ModLesscherContactFormC .dnnFormItem .dnnLabel + textarea { width:100% !important; padding:8px 0 !important;  max-width:none !important  }
	.ModLesscherContactFormC .dnnFormItem .dnnLabel + img[id*="captchaImage"] { width:100% !important;}
	
	/*footer */
	#Logo {top:0px; left:0px;}	
	#Footer .FooterPane {margin:0; padding-top:13px; display: block; text-align:center}
	#Footer .SocialMediaIcons {position: relative; top:auto; right:auto; display: block; max-width:100%; padding:15px 0; text-align:center}
}

@media only screen and (max-width: 480px){
	/*Header*/
	#Header #Logo { left:-1px;}
	#Header #MobileMenuTrigger {right:0px;}
	.pubItemTeam { float:none; width: 50%; margin-right:0}
	.pubArticleViewer .pubItemTeam  .pubThumbNail { height:200px;}
	.loginContent .LoginPanel{width:auto; max-width:500px;}
	.loginContent .LoginPanel .dnnForm .dnnFormItem {padding-bottom:10px;}
	.loginContent .LoginPanel .dnnFormItem > label.dnnFormLabel {display:none}
}



	/* ================================================================================ 
                                 COOKIE CONSENT
   ================================================================================ */
#CookieConsent { position: fixed; bottom: 0; left: 0; z-index: 100; width: 100%; padding: 10px; color: #444; background-color: #eee; box-sizing: border-box;}
.cookie-consent { text-align: center; }
.cookie-consent_message span, .cookie-consent_dismisslink, .cookie-consent_link { display: inline-block; padding: 5px 10px; }
a.cookie-consent_dismisslink { margin: 0 10px; color: #ffffff; background-color: #41a23e; border-radius: 4px;}
a.cookie-consent_dismisslink:hover { text-decoration: none; color: #ffffff; background-color: #2b7b29; }
a.cookie-consent_link { }
a.cookie-consent_link:hover { }